<!--
* @name: 批量选择人员
* @author:张鹏程
* @CreateTime:2023-04-21
-->
<template>
	<base-dialog @handleConfirmClick="personConfirmClick" :dialogVisible.sync="personDialog" title="批量选择人员" width="80%"
		top="5vh" :footerShow="true">
		<div style="height: 75vh;overflow: auto;" v-loading="personLoading">
			<div v-for="(item, index) in dataList" :key="index" flex="cross:top" class="dataBox">
				<div flex="cross:center" class="department">
					<p style="width: 120px;">{{ item.o_OrganName }}</p>
					<i class="el-icon-star-on star" @click="selectAll(item)" :class="{ 'active': item.active }"></i>
				</div>
				<div flex="cross:center" flex-wrap style="flex: 1;">
					<div v-for="(elItem, elIndex) in item.personList" :key="elIndex" class="personBox"
						@click="selectPerson(elItem)" :class="{ 'active': elItem.active }">
						<p class="name">{{ elItem.p_PersonName }}</p>
						<p class="phone">{{ elItem.p_Telphone }}</p>
					</div>
				</div>
			</div>
		</div>
	</base-dialog>
</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue"
import {
	PersonList
} from '@/api/apis/personnelSettings'
import {
	GetOrganTree
} from '@/api/apis/organization'
import {
	getCompanyId
} from "@/utils/auth";
export default {
	components: {
		baseDialog
	},
	watch: {
		selectedDataList: {
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				// newV.forEach(el=>{
				this.dataList.forEach(el => {
					let personNum = 0
					el.personList.forEach(personEl => {
						if (personEl.active) {
							personNum = personNum + 1
						}
					})
					if (personNum == 0) {
						el.active = false
					} else {
						el.active = true
					}
				})
				// })
			}
		},
		dataList: {
			deep: true, //深度监听设置为 true
			handler: function (newV, oldV) {
				let selectedDataList = []
				newV.forEach(el => {
					el.personList.forEach(item => {
						if (item.active) {
							selectedDataList.push(item)
						}
					})
				})
				this.selectedDataList = selectedDataList
			}
		}
	},
	data() {
		return {
			personDialog: false,
			dataList: [],
			selectedDataList: [],
			personLoading: false
		}
	},
	methods: {
		// 打开弹窗
		openDialog(selectedDataList = [], type) {
			this.personDialog = true
			this.selectedDataList = []
			this.getMenuData(selectedDataList)
		},
		// 人员确定
		personConfirmClick() {
			this.$emit('personConfirmClick', this.selectedDataList)
			this.personDialog = false
		},
		// 获得组织图
		async getMenuData(selectedDataList) {
			this.personLoading = true
			setTimeout(() => {
				this.personLoading = false
			}, 5000)
			let params = {
				// CompanyID: 1
				companyID: this.$store.state.user.companyID ?
					this.$store.state.user.companyID :
					getCompanyId(),
			};

			let res = await GetOrganTree(params);
			let dataList = JSON.parse(res.data[0])
			let departmentList = []
			function setDepartmentList(data) {
				data.forEach(item => {
					let arr = {
						o_OrganName: item.label,
						personList: [],
						active: false
					}
					departmentList.push(arr)
					if (item.children && item.children.length > 0) {
						setDepartmentList(item.children)
					}
				})

			}
			setDepartmentList(dataList)
			this.getPersonList(departmentList, selectedDataList)
			// let organMenuData = JSON.parse(res.data[0]);
		},
		// 获得人员列表
		async getPersonList(departmentList, selectedDataList) {
			let params = {
				"page": "1",
				"limit": "999",
				"departmentID": "",
			}
			let res = await PersonList(params)
			if (res.code === 1) {

				departmentList.forEach(el => {
					res.data[1].forEach(item => {
						if (el.o_OrganName == item.o_OrganName) {
							let personArr = {
								o_OrganName: item.o_OrganName,
								p_PersonName: item.p_PersonName,
								p_Telphone: item.p_Telphone,
								p_PersonID: item.p_PersonID,
								active: false
							}
							el.personList.push(personArr)
						}
					})
				})
				this.dataList = departmentList
				this.dataList.forEach(el => {
					el.personList.forEach(elItem => {
						selectedDataList.forEach(item => {
							if (item.p_PersonID == elItem.p_PersonID) {
								elItem.active = true
								this.selectedDataList.push(elItem)
							}
						})
					})

				})
				this.personLoading = false
			}
		},
		selectPerson(val) {
			let personActive = false
			val.active = !val.active
			// this.selectedDataList.forEach((el, index) => {
			// 	if (el.p_PersonID == val.p_PersonID) {
			// 		personActive = true
			// 		this.selectedDataList.splice(index, 1)
			// 	}
			// })
			// if (!personActive) {
			// 	this.selectedDataList.push(val)
			// }
		},
		// 全选
		selectAll(item) {
			item.active = !item.active
			// if(item.active){
			item.personList.forEach(el => {
				el.active = item.active
			})
			// }
		}
	}
}
</script>

<style scoped lang="scss">
$activeColor: var(--bg-color, "#00aaff");

.dataBox {
	padding: 5px 0;
	border-bottom: 1px solid #ccc;
	min-height: 50px;
}

.personBox {
	border-radius: 3px;
	text-align: center;
	background-color: #f0f0f0;
	color: #817582;
	padding: 10px 0;
	cursor: pointer;
	// width: 100px;
	min-width: 100px;

	// margin-bottom: 10px;
	.name {}

	.phone {
		font-size: 12px;
		margin-top: 5px;
	}
}

// .personBox+.personBox {
// 	margin-left: 10px;
// }

// .personBox:nth-of-type(8n+0) {
// 	margin-left: 0;
// }
.personBox {
	margin-right: 10px;
	margin-bottom: 5px;
}

// .personBox:nth-child(n+8) {
// 	margin-top: 10px;
// }

.personBox.active {
	color: #fff;
	background-color: $activeColor;
}

.department {
	font-size: 14px;
	text-align: center;
	margin-right: 10px;

	.el-icon-star-on {
		font-size: 26px;
		color: #f0f0f0
	}
}

.el-icon-star-on.active {
	color: $activeColor
}
</style>
